<?php
	session_start();
	
	include '../../../php/globalVars.php';
	include '../../../php/globalFuncs.php';
	include '../../../php/connections/dbconnect.php';
?>
<style>
	#messageNewMessageHeader {
		padding-bottom: 5px;
		width: 100%;
	}
	
	td.type {
		color: #333333;
	}
	
	#contactList {
		position: absolute;
		top: 50px;
		left: 10px;
		width: 410px;
		height: 210px;
		display: none;
		background-color: #FFFFFF;
		border: 1px solid #E2E2E2;
		overflow: hidden;
		
	}
	
	#contactListHeader {
		padding: 3px 5px 3px 10px;
		background-color: #EBEBEB;
		background-image: url(assets/images/website/main/menuButtonGreyGradient.jpg);
		background-repeat: repeat-x;
		font-weight: bold;
		color: #666666;
		border-bottom: 1px solid #E2E2E2;
		overflow: hidden;
		line-height: 33px;
	}
	
	#searchMessageContact {
		display: block;
		float: right;
		overflow: hidden;
		padding-right: 5px;
	}
	
	#closeContactList {
		cursor: pointer;
		color: #4486C7;
		margin-left: 5px;
	}
	
	#contactListHolder {
		background-color: #FFFFFF;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 3px;
		height: 165px;
	}
	
	.messageContact {
		border: 1px solid #D8DFEA;
		background-color: #EDEFF4;
		float: left;
		margin: 3px;
		padding-right: 3px;
		width: 117px;
		cursor: pointer;
	}
	
	.messageContact table img{
		margin-top: 1px;
	}
	
	#sendingToList {
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 70px;
	}
	
	.sendingToListItem {
		display: block;
		float: left;
		margin-right: 3px;
		margin-top: 3px;
		padding: 2px 4px 2px 4px;
		background-color: #EDEFF4;
		border: 1px solid #D8DFEA;
	}
	
	#messageErrorMessage{
		color: #FF0000;
	}

</style>
<script>
if (!Array.prototype.indexOf) {  
    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {  
        "use strict";  
        if (this == null) {  
            throw new TypeError();  
        }  
        var t = Object(this);  
        var len = t.length >>> 0;  
        if (len === 0) {  
            return -1;  
        }  
        var n = 0;  
        if (arguments.length > 0) {  
            n = Number(arguments[1]);  
            if (n != n) { // shortcut for verifying if it's NaN  
                n = 0;  
            } else if (n != 0 && n != Infinity && n != -Infinity) {  
                n = (n > 0 || -1) * Math.floor(Math.abs(n));  
            }  
        }  
        if (n >= len) {  
            return -1;  
        }  
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);  
        for (; k < len; k++) {  
            if (k in t && t[k] === searchElement) {  
                return k;  
            }  
        }  
        return -1;  
    }  
}

	$("#backToLink").text("Back to Inbox");
	$("#backToLink").click(function(){
		Popup('Messages | Inbox', 'messages/inbox', 0);
	});
	
	$("#btnAddRecipient").click(function(){
	
		var contactListHeight = $("#messageNewMessageHeader").innerHeight(true);
		
		$("#contactList").css({
			"height" : contactListHeight
		});
	
		$("#contactList").show();
		
		
		
		
	});
	
	$("#closeContactList").click(function(){
	
		contactsListed = [];
		$("#sendingToList").text("");
		
		$("#sendingTo").val("");
	
		for(var i = 0; i < sendingToArray.length; i++){
		
			var contactIndex = sendingToArray[i].contactIndex;
			var userID = sendingToArray[i].userID;
			
				contactsListed.push(contactIndex);
			
				var displayName = sendingToArray[i].displayName;
				$("#sendingToList").append("<span class='sendingToListItem " + contactIndex + " " + userID +"'>" + displayName + "</span>");
				$("#sendingTo").val($("#sendingTo").val() + "_" + userID);
		}
		
		

		$("#contactList").hide();
	});
	
	var sendingToArray = new Array();
	var sendingToContactIndex = new Array();
	var contactsListed = new Array();
	
	function SendingTo(contactIndex, userID, displayName){
		this.contactIndex = contactIndex;
		this.userID = userID;
		this.displayName = displayName;
	}
	
	$(".messageContact").click(function(){
	
		// classes
		var classesArray = $(this).attr('class').split(' ');
		
		// contact index
		var contactIndex = $(this).attr('id');
		
		// userID
		var userID = classesArray[1];
		
		// display name
		var displayName = $("td.mc_" + contactIndex).text();
		
		// ---------- ADD OR REMOVE FROM SENDING TO LIST ---------- \\
		
		if(sendingToContactIndex.indexOf(contactIndex) == -1){ // add to sending list
			sendingToContactIndex.push(contactIndex);
			sendingToArray.push(new SendingTo(contactIndex, userID, displayName));
			
			$(this).css({
				"background-color" : "#69A74E",
				"border-color" : "#3B6E22",
				"color" : "#FFFFFF"
			});

		} else { // remove from sending list
			
			var i = 0;
			
				do {
					if(sendingToContactIndex[i] == contactIndex) {
						sendingToContactIndex.splice(i, 1);
						sendingToArray.splice(i, 1);
						
						//$("#sendingToList ." + contactIndex).remove();
						
						$(this).css({
							"background-color" : "#EDEFF4",
							"border-color" : "#D8DFEA",
							"color" : "#666666"
						});
					}

					i++;
					
				} while (i < sendingToContactIndex.length);
		}
	});
	
	$("#btnSendMessage").click(function(){
	
		$("#messageErrorMessage").html("&nbsp;");
		
		if(sendingToArray.length == 0){
			$("#messageErrorMessage").text("You need at least 1 recipient.");
		}
		
		if($("#txtMessage").val().trim() == ""){
			$("#messageErrorMessage").text("You need to write a message.");
		} else if($("#txtMessage").val().length > 1500){
			$("#messageErrorMessage").text("Your message must be less than 1500 characters.");
		}
		
		if($("#messageErrorMessage").text().trim() == ""){ // if no errors occured
		
			//show loading image
			$("#sendSending").text('Sending...');
			$("#txtMessage").attr("readonly", "readonly");
			$("#txtMessage").css({ "background-color" : "#E8E8E8", "color" : "#666666" });
			$("#messageAttachment").attr("readonly", "readonly");
			$("#btnAddRecipient").off('click');
		
			$("#messageForm").submit();
		}
	});
	
	//if error display default sending to and message
	$("#txtMessage").val($("#messageTextPost").val());
	
	$("#messageErrorMessage").text($("#messageSendingError").val());
	
	var postedMessageToArray = $("#messageSendingToPost").val().split('_');
	
	for(var i = 0; i < postedMessageToArray.length; i++){
		if(+ postedMessageToArray[i] != ""){
		
			var contactIndex = $("#displayName_" + postedMessageToArray[i]).attr("class").replace("mc_", "");
			var displayName = $("#displayName_" + postedMessageToArray[i]).text();
			var userID = postedMessageToArray[i];

			$("#sendingToList").append("<span class='sendingToListItem " + contactIndex + " '>" + displayName + "</span>");
			
			sendingToContactIndex.push(contactIndex);
			sendingToArray.push(new SendingTo(contactIndex, userID, displayName));
			contactsListed.push(contactIndex);
			$("#sendingTo").val($("#sendingTo").val() + "_" + userID);
			
			$("#" + contactIndex).css({
				"background-color" : "#69A74E",
				"border-color" : "#3B6E22",
				"color" : "#FFFFFF"
			});
		}
	}
	
	
</script>
<form action="" method="POST" id="messageForm" enctype="multipart/form-data">
	<input type="hidden" name="sendingTo" id="sendingTo" />
	<input type="hidden" name="postLoad" value="sendingMessage" />
	<table id="messageNewMessageHeader">
		<tr>
			<td align='right' class='type'>To: </td><td><a href='javascript:void(0)' id='btnAddRecipient'>Add recipient</a></td>
		</tr>
		<tr>
			<td></td><td>
						<div id='sendingToList'>
							<!--<span class='sendingToListItem'>Liam O'Connor</span>-->
						</div>
					</td>
		</tr>
		<tr>
			<td align='right' valign='top' class='type'>Message: </td><td><textarea id="txtMessage" name='txtMessage' style="width:333px;height:100px;color:#333333"></textarea></td>
		</tr>
		<tr>
			<td align='right' class='type'>Attach: </td><td><input type='file' name='messageAttachment' id="messageAttachment"/></td>
		</tr>
		<tr>
			<td colspan='2' align='right'><span id='messageErrorMessage'>&nbsp;</span></td>
		</tr>
		<tr>
			<td></td><td align='right' id='sendSending'><input type='button' class='button' value='Send' id="btnSendMessage"/></td>
		</tr>
	</table>
</form>
<div id='contactList'>
	<div id='contactListHeader'>
		Add Recipient <div id='searchMessageContact'>Search: <input type='text' /> <span id='closeContactList'>Save</span></div>
	</div>
	<div id='contactListHolder'>
		<div style="margin:0 auto;width:384px">
			<?php 
			$mutualFollowers = MutualFollowers($userID);
			
			//get array of names and put in alphabetical order
			$mutualFollowersNamesArray = array();
			for($i = 0; $i < count($mutualFollowers); $i++){
				$mutualFollowersNamesArray[$i] = array($mutualFollowers[$i], DisplayName($mutualFollowers[$i]));
			}
			
			array_multisort($mutualFollowersNamesArray, SORT_ASC, SORT_STRING);

			
			$i = 0;
			
			foreach($mutualFollowersNamesArray as $user){
				$uid = $user[0];
				$displayName = $user[1];
			?>
				
			<div id='<?php echo $i; ?>' class='messageContact <?php echo $uid; ?>'>
				<table>
					<tr>
						<td><img src='../assets/images/profilePics/s/noProfilePic.png'/></td><td class='mc_<?php echo $i; ?>' id="displayName_<?php echo $uid; ?>"><?php echo $displayName; ?></td>
					</tr>
				</table>
			</div>
				
			<?php
				$i++;
			}
			?>

		</div>
	</div>
</div>